<template>
	<div class="staffdetail">
		 <back :title="title"></back>
		 <div class="join" @click="addstaff">
		 	<p>添加员工</p>
		 	<i class="el-icon-erp-gengduo"></i>
		 </div>
		 <p class="tips" v-show="isShow">暂时还没有员工哦~</p>
		 <div class="stafflist" v-for="item in staffList">
		 	<div class="box">
		 		<div class="infor">
		 			<img :src="item.headSculptureUrl" />
		 			<p>{{item.userName}}</p>
		 		</div>
		 		<i class="el-icon-erp-shanchu" @click="del(item.id)"></i>
		 	</div>
		 </div>
	</div>
</template>

<script>
import back from '@/components/m-shop/m-store/back'

export default {
	name:'staffdetail',
	components: {
		back
	},
	data () {
		return {
			title: '员工信息',
			staffList:[],
			isShow:false
		 }
	  },
	  created () {
	  	this.getStaff()
	  },
	  mounted () {
	  	
	  },
	  methods:{
	  	//获取员工信息
	  	getStaff () {
	  		this.$http.get(this.$store.state.reqUrl + '/shop/emps/'+this.$store.state.shop_id, {	  			
	  		}).then(res => {
	  			  if(res.data.length === 0) {
	  			  	this.isShow = true
	  			  	 this.staffList = []
	  			  }else{
	  			  	this.staffList = res.data
	  			  }
		    })		
	  	},
	  	//删除
	  	del (id) {
	  		this.$messagebox.confirm('确定要删除吗?').then(action => {
				this.$http.delete(this.$store.state.reqUrl + '/shop/emps/'+id, {}).then(res => {
					this.getStaff()
				}).catch(res => {
					this.$toast(res.response.data)
				})
		     })
	  	},
	  	addstaff () {
	  		this.$router.push("/addstaff")
	  	}
	  }
	}
</script>

<style lang="less" scoped>
  .staffdetail {
  	width: 100%;
  	margin-top: 200px;
  	.join {
  		position: fixed;
  		top: 100px;
  		left: 0;
  		width: 100%;
  		height: 80px;
  		background: #FFFFFF;
  		font-size: 28px;
  		line-height: 80px;
  		display: flex;
  		color: darkgray;
  		border-bottom: 1px solid #F6F6F6;
  		p {
  			text-align: right;
  			flex: 1;
  		}
  		i {
  			width: 66px;
  			line-height: 80px;
  			text-align: left;
  			font-size: 30px;
  		}
  	}
  	.tips{
  		 font-size: 34px;
	 	 color: darkgray;
	 	 text-align: center;
	 	 margin-top: 50%;
  	}
  	.stafflist {
  		width: 100%;
  		background: #FFFFFF;
  		border-bottom: 1px solid gainsboro;
  		.box {
  			padding: 30px 20px;
  			display: -webkit-flex;
  			align-items: center;
  			justify-content: center;
  			.infor {
  				flex: 1;
  				display: -webkit-flex;
  				justify-content: center;
  				align-items: center;
  				img {
  					width: 100px;
  					height: 100px;
  				}
  				p {
  					margin-left: 20px;
  					flex: 1;
  					font-size: 28px;
  				}
  			}
  			i {
  				width: 80px;
  				font-size: 60px;
  			}
  		}
  	}
  }
</style>